<script setup>
import { getUser, updateUser } from "@/api/user";
import { message } from "ant-design-vue";
import { nextTick, ref } from "vue";

const emit = defineEmits(["finished"]);

const visible = ref(false);
const spinning = ref(true);
const formRef = ref();
const formState = ref({
  id: null,
  username: "test",
  password: null,
  email: "test@qq.com",
  playerName: "test",
  balance: 0,
  regIp: "127.0.0.1",
  regTime: "2021-09-25T11:16:13",
  userRole: 1,
});
const rules = {
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  email: [
    { required: true, message: "请输入用户邮箱", trigger: "blur" },
    { type: "email", message: "邮箱格式错误", trigger: "blur" },
  ],
  playerName: [{ required: true, message: "请输入玩家名", trigger: "blur" }],
  userRole: [{ required: true, type: "integer", message: "请选择角色", trigger: "blur" }],
  balance: [{ required: true, type: "number", message: "请输入余额", trigger: "blur" }],
};

const onSubmit = async () => {
  try {
    await formRef.value.validate();
  } catch {
    return;
  }
  let { data } = await updateUser(formState.value);
  if (data.code != 200) {
    message.error(data.message);
    return;
  }
  message.success(data.message);

  emit("finished");
  visible.value = false;
};

const init = async (id) => {
  visible.value = true;
  spinning.value = true;
  formState.value.id = id;
  await nextTick();
  formRef.value.resetFields();
  if (id) {
    let { data } = await getUser(id);
    formState.value = data.data;
  }
  spinning.value = false;
};

defineExpose({
  init,
});
</script>

<template>
  <a-drawer
    :title="formState.id ? '修改用户' : '新增用户'"
    placement="right"
    :mask-closable="false"
    :width="720"
    v-model:visible="visible"
  >
    <a-spin :spinning="spinning">
      <a-form ref="formRef" :rules="rules" :model="formState" layout="vertical">
        <a-form-item label="ID" name="id" v-if="formState.id != null">
          <a-input v-model:value="formState.id" disabled />
        </a-form-item>
        <a-form-item label="账号" name="username">
          <a-input v-model:value="formState.username" />
        </a-form-item>
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formState.email" />
        </a-form-item>
        <a-form-item label="玩家名" name="playerName">
          <a-input v-model:value="formState.playerName" />
        </a-form-item>
        <a-form-item label="余额" name="balance">
          <a-input-number v-model:value="formState.balance" :precision="2" :min="0" :step="0.1" />
        </a-form-item>
        <a-form-item label="密码(留空不修改)" name="password">
          <a-input v-model:value="formState.password" />
        </a-form-item>
        <a-form-item label="角色" name="userRole">
          <a-select v-model:value="formState.userRole" style="width: 100%">
            <a-select-option :value="1">普通用户</a-select-option>
            <a-select-option :value="2">审核人员</a-select-option>
            <a-select-option :value="3">管理人员</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-drawer>
</template>
